<template>
  <div id="app">
    <h1>项目实战code4</h1>
    <p>欢迎光临vue开发收银系统—水果店</p>
    <table class="tb">
      <tr>
        <td>苹果10￥/斤，折扣《8折》</td>
      </tr>
      <tr>
        <td>
          请输入要购买的斤数：
          <input type="number" v-model.number="buy" />
        </td>
      </tr>
      <tr>
        <td><button @click="order">结账买单</button></td>
      </tr>
      <tr>
        <td>结账单：总价：{{ total }} ￥元，折后价：{{zhe}} ￥元，省了：{{save}} ￥元</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      buy: 0,
      total: 0,
      zhe: 0,
      save: 0,
    };
  },
  methods: {
    order() {
      this.total = this.buy * 10
      this.zhe = this.total * 0.8
      this.save = this.total - this.zhe
      this.buy = ''
    },
  },
};
</script>


<style scoped>
#app {
  width: 600px;
  margin: 10px auto;
}

.tb {
  border-collapse: collapse;
  width: 100%;
}

.tb th {
  background-color: #0094ff;
  color: white;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}

.add {
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 10px;
}
</style>
